import React from 'react';
import {Alert, View,Clipboard,Text, StyleSheet, Image, CameraRoll, Platform, PermissionsAndroid } from 'react-native';
import { deviceWidth } from 'src/util'
import Modal from 'react-native-modal'
import { deviceHeight, titleHeight } from '../../../util';
import { Flex } from '@ant-design/react-native';
import Layer from "src/components/Layer";
import RNFS from 'react-native-fs';
import DownloadUtil from 'src/utils/DownloadUtil'


export default class QrCodeView extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isVisible: false,
        }
    }

    selectedPayWay = (flag) => {
        this.setState({ payWay: flag });
    }

    showOrDismiss = (flag) => {
        this.setState({ isVisible: flag });
    }

    async requestReadPermission() {
        try {
            //返回string类型
            const granted = await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
                {
                    //第一次请求拒绝后提示用户你为什么要这个权限
                    'title': '我要读写权限',
                    'message': '没权限我不能工作，同意就好了'
                }
            )
            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                DownloadUtil.saveImageAlbum(this.props.customer.qrcode)
            } else {

            }
        } catch (err) {

        }
    }



    componentDidMount = () => {
        this.state.isVisible = this.props.isVisible;
    }
    render() {
        const { customer } = this.props
        return (
            <Modal isVisible={this.state.isVisible}
                animationInTiming={600}
                animationOutTiming={100}
                animationIn="zoomInUp"
                animationOut={'zoomOutDown'}
                backdropOpacity={0.2}
                style={{
                    marginLeft: 10,
                    marginRight: 10,
                    justifyContent: 'flex-start',
                    marginTop: 50,
                }}
                onBackdropPress={() => {
                    this.showOrDismiss(false);
                }}>
                <View style={{ alignItems: 'center', backgroundColor: '#fff', marginHorizontal: 50, height: deviceWidth - 100, marginTop: deviceHeight * 0.5 - (deviceWidth - 100) * 0.5, borderRadius: 10 }}>
                    <Flex
                        style={{ position: 'absolute', left: 20, top: 10 }}
                        onPress={() => {
                            this.props.close()
                        }}>
                        <Image
                            style={{ width: 25, height: 25 }}
                            source={require('src/assets/chaClose.png')}
                        >
                        </Image>
                    </Flex>

                    <Flex onLongPress={() => {

                        if (Platform.OS == "android") {

                            const granted = PermissionsAndroid.check(
                                PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
                            )
                            granted.then((data) => {
                                if (data) {
                                    DownloadUtil.saveImageAlbum(customer.qrcode)
                                } else {
                                    this.requestReadPermission()
                                }
                            })
                        }
                        else {
                            DownloadUtil.saveImageAlbum(customer.qrcode)
                        }


                    }}>
                   <Image style={{ marginTop: 30, width: deviceWidth / 3, height: deviceWidth / 3 }} source={{ uri: customer.qrcode }}></Image>
                    </Flex>
                    <View style={{ marginTop: 20 }}>
                        <Text>长按保存</Text>
                    </View>

                    <Flex onLongPress={() => {
                        Clipboard.setString(customer.number)
                        Alert.alert('', '复制成功!');
                    }} 
                    style={{ marginTop: 20, flexDirection: 'row' }}>
                        <Text style={{ fontSize: 13 }}>微信号:</Text>
                        <Text style={{ fontWeight: 'bold', color: '#6877DC', fontSize: 13 }}>{customer.number}</Text>
                    </Flex>

                </View>
            </Modal>

        )
    }
}

const styles = StyleSheet.create({
    image: {
        width: 40,
        height: 40,
        marginLeft: 20
    },
    TextPosition: {
        marginTop: 10,
        marginLeft: 15,
        fontSize: 15
    },
    cellView: {
        height: 80,
        width: deviceWidth,
        paddingLeft: 20,
        paddingRight: 30
    }

})